<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 定义props
const props = defineProps<{
  modelValue: string
  type?: string
  step?: string | number
  min?: string | number
  placeholder?: string
  width?: string
}>()

// 定义emits
const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

// 处理输入变化
const handleInput = (event: Event) => {
  const target = event.target as HTMLInputElement
  emit('update:modelValue', target.value)
}

// 响应式检测当前设备类型
const isMobile = ref(window.innerWidth < 768)

// 监听窗口大小变化
const handleResize = () => {
  isMobile.value = window.innerWidth < 768
}

// 组件挂载时添加事件监听
onMounted(() => {
  window.addEventListener('resize', handleResize)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// 根据显示值（使用placeholder作为默认值）计算合适的宽度
const calculatedWidth = computed(() => {
  const displayText = props.placeholder || ''
  
  // 根据实验结果，charCount * 16是合适的，加上一些内边距和安全余量
  // 根据设备类型设置不同的最大宽度
  const charCount = displayText.length
  const minWidth = 96 // w-24 = 96px
  const maxWidth = isMobile.value ? 250 : 700 // 手机端250px，电脑端700px
  const calculated = Math.min(Math.max(minWidth, charCount * 16), maxWidth)
  
  // 转换为Tailwind类
  return `w-[${calculated}px]`
})

// 计算显示值：如果modelValue为空，则使用placeholder作为默认值
const displayValue = computed(() => {
  return props.modelValue || props.placeholder || ''
})
</script>

<template>
  <div class="relative inline-block">
    <input 
      :value="displayValue"
      @input="handleInput"
      :type="type || 'text'"
      :step="step"
      :min="min"
      :class="[
        'mx-2 px-3 py-1 border-b-2 border-green-500 focus:border-green-700 outline-none text-center',
        width ? width : calculatedWidth
      ]"

    >
  </div>
</template>

<style scoped>
/* 输入框聚焦样式已由全局styles.css提供 */
</style>